<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CacheCloud用户申请</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <#include '/inc/frontResources.html'>
    <script type="text/javascript">
      //验证邮箱格式
      var valEmails = /^(([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3};){0,6}([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      //验证手机号格式
      var valPhones = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
      //验证密码强度
      var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');

      function encrypt(data) {
        var key  = CryptoJS.enc.Latin1.parse('CacheCloud123456'); //16位，自定义
        var iv   = CryptoJS.enc.Latin1.parse('CacheCloud123456'); //16位，自定义
        return CryptoJS.AES.encrypt(data, key, {iv:iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.ZeroPadding}).toString();
      }

      function checkUser() {
        var name = document.getElementById("name");
        var chName = document.getElementById("chName");
        var email = document.getElementById("email");
        var mobile = document.getElementById("mobile");
        var weChat = document.getElementById("weChat");
        var isAlert = document.getElementById("isAlert");
        if (name.value == "") {
          alert("域账户名不能为空!");
          name.focus();
          return false;
        }
        if (chName.value == "") {
          alert("中文名不能为空!");
          chName.focus();
          return false;
        }
        if (email.value == "") {
          alert("邮箱不能为空!");
          email.focus();
          return false;
        }
        if (!valEmails.test(email.value)) {
          alert("邮箱格式错误!");
          email.focus();
          return false;
        }
        if (mobile.value == "") {
          alert("手机号不能为空!");
          mobile.focus();
          return false;
        }
        if (!valPhones.test(mobile.value)) {
          alert("手机号格式错误!");
          mobile.focus();
          return false;
        }
        if (weChat.value == "") {
          alert("微信号不能为空!");
          weChat.focus();
          return false;
        }
        return true;
      }

      function checkUserNameExist(id) {
        var userName = document.getElementById(id).value;
        if (userName != '') {
          $.post(
                  '${request.contextPath}/user/checkUserNameExist',
                  {
                    userName: userName,
                  },
                  function (data) {
                    if (data == 1) {
                      alert("用户名已经存在，请修改或者联系管理员");
                      document.getElementById(id).focus();
                      document.getElementById(id).value = "";
                    }
                  }
          );
        }
      }

      function checkPassword() {

        var password = $('#password').val();
        if (!pwdRegex.test(password)) {
          alert("您的密码复杂度太低，密码中必须包含字母、数字、特殊字符至少8个字符，请修改密码！");
          $('#password').focus();
          return false;
        }
        return true;
      }

      function checkConfirmPassword() {
        var password = $('#password').val();
        var password1 = $('#password1').val();
        if (password != password1) {
          alert("两次密码输入不一致，请确认密码！")
          $('#password1').focus();
          return false;
        }
        return true;
      }

      function registerUser(pwdFlag) {
        var company = "";
        var purpose = "";
        var encryPwd = "";
        if(pwdFlag){
          if (!checkPassword()) {
            return;
          }
          if (!checkConfirmPassword()) {
            return;
          }
          var password = document.getElementById("password");
          encryPwd = $.md5(password.value);
        }
        if(!checkUser()){
          return;
        }

        var name = document.getElementById("name");
        var chName = document.getElementById("chName");
        var email = document.getElementById("email");
        var mobile = document.getElementById("mobile");
        var weChat = document.getElementById("weChat");
        var type = document.getElementById("type");
        var isAlert = document.getElementById("isAlert");
        var bizId = document.getElementById("bizId");

        var userBtn = document.getElementById("registerUserBtn");
        userBtn.disabled = true;

        $.post(
                '${request.contextPath}/user/apply',
                {
                  name: name.value,
                  chName: chName.value,
                  email: email.value,
                  mobile: mobile.value,
                  weChat: weChat.value,
                  type: type.value,
                  isAlert: isAlert.value,
                  password: encryPwd,
                  company: company,
                  purpose: purpose,
                  bizId: bizId.value
                },
                function (data) {
                  $("#allBody").html(data);//刷新整个body页面的html
                }
        );
      }

    </script>
    <script src="${request.contextPath}/assets/vendor/jquery/jquery.md5.js" type="text/javascript"></script>
  </head>

  <body class="hold-transition sidebar-mini layout-navbar-fixed" id="allBody">
    <div class="wrapper">
    <#include "/inc/head.html">
      <div class="content-wrapper ml-0">
        <div class="content">
          <div class="container">
            <div id="systemAlert">
            </div>
        <!-- stat info start -->
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">
                      CacheCloud用户申请
                      <font color='red' size="4">
                        <#if success?? && (success == 1)>(申请成功，请关注邮件中审批进度)
                        <#elseif success?? && (success == 0)>(申请失败，请确认填写信息)
                        </#if>
                      </font>
                    </h3>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-12">
                          <div class="form">
                            <!-- BEGIN FORM-->
                            <form method="post"
                                  class="form-horizontal form-bordered form-row-stripped">
                              <div class="form-body">

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    账户名:
                                  </label>
                                  <div class="col-md-6">
                                    <input type="text" name="name" id="name" placeholder="域账户名(邮箱前缀)"
                                           class="form-control" onchange="checkUserNameExist(this.id)"/>
                                  </div>
                                </div>

                                <#if pwdswitch?? && pwdswitch>
                                  <div class="form-group row">
                                    <label class="col-form-label col-md-4 text-end">
                                      密码:
                                    </label>
                                    <div class="col-md-6">
                                      <input type="password" name="password" id="password" placeholder="输入密码"
                                             class="form-control" onchange="checkPassword()"/>
                                      <span class="help-block">密码中必须包含字母、数字，至少8个字符</span>
                                    </div>
                                  </div>

                                  <div class="form-group row">
                                    <label class="col-form-label col-md-4 text-end">
                                      确认密码:
                                    </label>
                                    <div class="col-md-6">
                                      <input type="password" name="password1" id="password1" placeholder="再次输入密码"
                                             class="form-control" onchange="checkConfirmPassword()"/>
                                    </div>
                                  </div>
                                </#if>

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    中文名:
                                  </label>
                                  <div class="col-md-6">
                                    <input type="text" name="chName" id="chName" placeholder="中文名"
                                           class="form-control"/>
                                  </div>
                                </div>

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    邮箱:
                                  </label>
                                  <div class="col-md-6">
                                    <input type="text" name="email" id="email" placeholder="邮箱"
                                           class="form-control"/>
                                  </div>
                                </div>

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    手机:
                                  </label>
                                  <div class="col-md-6">
                                    <input type="text" id="mobile" name="mobile" placeholder="手机"
                                           class="form-control"/>
                                  </div>
                                </div>

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    微信:
                                  </label>
                                  <div class="col-md-6">
                                    <input type="text" id="weChat" name="weChat" placeholder="微信"
                                           class="form-control"/>
                                  </div>
                                </div>

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    是否接收报警:
                                  </label>
                                  <div class="col-md-6">
                                    <select name="isAlert" id="isAlert" class="form-select">
                                      <option value="1" selected>
                                        是
                                      </option>
                                      <option value="0">
                                        否
                                      </option>
                                    </select>
                                  </div>
                                </div>

                                <div class="form-group row">
                                  <label class="col-form-label col-md-4 text-end">
                                    所属业务组:
                                  </label>
                                  <div class="col-md-6">
                                    <select id="bizId" name="bizId" class="form-select">
                                      <option value="">请选择归属业务组，如无您的业务组，请联系管理员</option>
                                      <#list bizList as biz>
                                        <option value="${biz.id!}">${biz.name!}</option>
                                      </#list>
                                    </select>
                                  </div>
                                </div>

                                <input type="hidden" id="type" name="type" value="-1">
                                <br/><br/>
                                <div class="form-group row">
                                  <div class="col-md-12">
                                    <div class="text-center">
                                      <button id="registerUserBtn" type="submit" class="btn btn-success" onclick="registerUser(${pwdswitch?c})"
                                      <#if success?? && (success == 1)>disabled="disabled"</#if>>
                                      <i class="bi bi-check"></i>
                                      提交申请
                                      </button>
                                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                      <button type="reset" class="btn btn-success">
                                        <i class="bi bi-check"></i>
                                        &nbsp;&nbsp;重&nbsp;&nbsp;&nbsp;置&nbsp;&nbsp;
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <#include "/inc/footer.html">
    </div>
  </body>
</html>